<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var sheet_init = {};
		sheet_init.Cfg = {FrozenCol:0,SearchMode:smLazyLoad,Page:30};
		
		//HeaderMode
		sheet_init.HeaderMode = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		sheet_init.Cols = [
		       			{Header:"NO",		Type:"Seq", Align:"Right"},
		       			{Header:"상태",		Type:"Status", Align:"Center"},
		       			{Header:"삭제",		Type:"DelCheck"},
		       			{Header:"문자열",	Type:"Text", KeyField:1, Align:"Center"},
		       			{Header:"콤보",		Type:"Combo", Width:80, ComboText:"대기|진행중|완료", ComboCode:"01|02|03",PopupText:"대기|진행중|완료"},
		       			{Header:"콤보에디트",	Type:"ComboEdit", Width:80, ComboText:"고려대학교|고려대학교2|국민대학교|서울대학교|숙명여자대학교|연세대학교|울산대학교|울산과학기술대학교|이화여자대학교|인천대학교|인천가톨릭대학교"},
		       			{Header:"팝업",		Type:"Popup", Width:100},
		       			{Header:"팝업에디트",	Type:"PopupEdit", Width:100},
		       			{Header:"자동합계",	Type:"AutoSum", Align:"Right",Width:70,Format:"NullInteger"},
		       			{Header:"자동평균",	Type:"AutoAvg", Align:"Right",Width:70, Format:"NullFloat"},
		       			{Header:"정수",		Type:"Int", Align:"Right", Format:"Integer",Width:70, Hidden:1},
		       			{Header:"실수",		Type:"Float", Align:"Right", Format:"Float",Width:70, Hidden:1},
		       			{Header:"날짜",		Type:"Date", Align:"Center", Format:"Ymd", Width:100},
		       			{Header:"패스워드",	Type:"Pass", Hidden:1},
		       			{Header:"체크박스",	Type:"CheckBox"},
		       			{Header:"라디오",	Type:"Radio"}
		       		]; 
		
		IBS_InitSheet(mySheet, sheet_init);
	
		//컬럼의 너비 조정
		mySheet.FitColWidth();
		
		doAction("search");
	});

	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data.xml");
				break;
				
			case "init":		//초기화
				mySheet.Reset();
				createSheet();
				break;
		}
	}
	
</script>
<title>스크롤 바 디자인 변경 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>
	<div id="title">스크롤 바 디자인 변경 예제</div>
	<div id="desc">
		ibsheet.css 파일을 수정하여 지정한 이미지로 사용자 스크롤바를 대신할 수 있다.<br>
		다만 이 기능은 스크립트를 통한 드레그/드롭을 사용함으로 html4기반의 드레그 드랍시 나타날수 있는 한계를 갖고 있다.<br>
		대표적으로 드레그 상태로 브라우져 밖으로 커서를 옮기고, 이후 브라우져 안으로 커서를 넣으면 계속 드레그 상태로 인식하는 등에 문제가 있다.<br>
		이는 html4기반에서 아직 드레그/드롭기능을 제공하지 않고, 이를 javascript를 이용하여 비슷하게 구현하는 도중 나오는 문제로 아직 알려진 해결방법은 없다.
	</div>
	<div align="right">
		<input type="button" value="초기화" onclick="doAction('init')">
		<input type="button" value="조회" onclick="doAction('search')">
	</div>
	<div id="functionArea">
		<div>
		ibsheet 폴더 내에 ibsheet.cfg 파일이 있는데, 파일 안에 CustomScroll을 설정해야 이미지 스크롤바를 사용할 수 있다.<br>
		CustomScroll="1"은 스크롤 이미지내에서 첫번째 이미지를 선택한다는 것이다.<br>
		<br>
		&lt;SHEET&gt;<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&lt;Cfg<br> 
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Down2Excel_Url="../jsp/Down2Excel.jsp"<br> 
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>CustomScroll="1"</u><br>
		&nbsp;&nbsp;&nbsp;&nbsp;/&qt;<br>
		&lt;/SHEET&gt;<br>
		<br>
		스크롤 이미지 파일에 보면 순서대로 2개씩 짝을 이뤄서 여러개가 있다. 그 순서를 나타낸다.<br>
		<br>
		<img src="../image/h_scroll.png"><br>
		</div>
		<br>
		<div>
		다음은 이미지에 맞춰서 css 파일을 수정해야 한다.
		제공되는 ibsheet 스크립트 폴더 안에 js 폴더가 있고 테마 관련된 폴더들이 존재한다.(기본값 : Main)<br>
		테마 폴더 안에 <u>ibsheet.css</u> 파일이 있다.<br>
		ibsheet.css 파일을 열면 567 ~ 628 라인까지 Custom scrollbars 라고 구분된 곳에서 스크롤바 내용을 수정할 수 있다.<br>
		<br>
		/*  Custom scrollbars  */<br>
		.GMCustScroll1RightHidden { background:url(VScroll.gif) left -108px; height:18px; overflow:hidden; }<br>
		.GMCustScroll1Right { padding-right:18px; background:url(VScroll.gif) right 0; }<br>
		.GMCustScroll1RightHover { padding-right:18px; background:url(VScroll.gif) right -18px; }<br>
		(이하 생략)<br>
		<br>
		스크롤바 이미지는 각각 조각되어 따로 존재하지 않고 VScroll.png(또는 gif) 와 HScroll.png(또는 gif) 파일에서 필요한 부분을 잘라서<br>
		화면에 보여주고 있으므로 css 파일에서 left, right, top, bottom 값을 변경하도록 한다. 
		</div>
	</div>
	<div id="viewArea">
	</div>
</div>
</body>
</html>